<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref } from "vue";
import MyInitiated from "./components/MyInitiated.vue";
const tabActive = ref(0);
const keyword = ref("");
const onSearch = () => {
  alert(1);
};
const router = useRouter();
</script>
<template>
  <div class="box">
    <van-tabs v-model:active="tabActive" animated class="tabs">
      <template #nav-bottom>
        <div class="search-box">
          <form action="/">
            <van-search
              class="text"
              v-model="keyword"
              placeholder="请输入查询事项"
              type="search"
              @search="onSearch"
            >
            </van-search>
          </form>
          <img src="@/assets/images/message.svg" class="message" />
        </div>
      </template>
      <van-tab title="我发起的">
        <MyInitiated />
      </van-tab>
      <van-tab title="待办"><MyInitiated /></van-tab>
      <van-tab title="已办"><MyInitiated /></van-tab>
      <van-tab title="待阅">待阅</van-tab>
      <van-tab title="已阅">已阅</van-tab>
    </van-tabs>
  </div>
</template>

<style scoped lang="scss">
.box {
  height: 100%;
  .tabs {
    --van-tab-active-text-color: var(--primary-color);
    --van-tab-text-color: #626262;
    --van-tab-line-height: 46px;
    --van-tabs-line-height: 46px;
    --van-tabs-bottom-bar-width: 25px;
    height: 100%;
    overflow-y: auto;
    :deep(.van-tabs__nav) {
      padding-left: 8px;
    }
    :deep(.van-tabs__wrap) {
      margin-bottom: 1px;
      box-shadow: 0 0 0 1px #f3f3f3;
    }
  }
  .search-box {
    padding: 8px 16px;
    background-color: #fff;
    display: flex;
    align-items: center;
    form {
      flex: 1;
    }
    .message {
      width: 32px;
      height: 32px;
      object-fit: contain;
      margin-left: 14px;
    }

    .text {
      padding: 0;
    }
  }
}
</style>
